<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Copyright" content="XX小学智慧操场" />
<meta name="keywords" content="XX小学智慧操场" />
<meta name="description" content="XX小学智慧操场" />
<title>XX小学智慧操场 - 首页</title>
<link type="text/css" rel="stylesheet" media="all" href="css/socss.css" />
<link type="text/css" rel="stylesheet" media="all" href="css/index.css" />
<style type="text/css">
.west,.east{width:25%;}
.mid{width:44%;}
.midTop{height:24.2%;display: flex;}
.midTop .one{width:24%;flex-grow:1;flex-shrink:0; justify-content: center;align-items: center;display: flex;flex-direction: column;}
.mid .boxSB,
.boxSB{position:relative;height:32%;overflow:hidden;}
  </style>
</head>
<body>
<div id="pageWrap" class="wrapper">
  <div class="all-header">
    <h1 class="h1-title">XX小学智慧操场</h1>
    <div id="sysTime" class="todayTime"></div>
  </div>
  <div class="search">
    <div class="item">当天</div>
    <div class="item">本周</div>
    <div class="item">本月</div>
    <div class="item">本学期</div>
    <!-- <div class="item"></div> -->
  </div>

<div class="mainInfoBox">

  <div class="area areaB">

    <div class="pos west">

      <div class="boxSB mar-b10">
          <h4 class="h4-t h4-tb">当天班级里程排行</h4>
          <table class="table" cellspacing="0" cellpadding="0">
            <tr><th>排名</th><th>班级</th><th>年级</th><th>总时长(h)</th></tr>
            <tr><td>
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-diyiming7"></use>
              </svg>
            </td><td>2456</td><td>23</td><td>2456</td></tr>
            <tr><td>
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dierming3"></use>
              </svg>
            </td><td>2147</td><td>24</td><td>2014</td></tr>
            <tr><td>
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-disanming3"></use>
              </svg>
            </td><td>1987</td><td>25</td><td>1945</td></tr>
            <tr><td>4</td><td>1754</td><td>21</td><td>1874</td></tr>
            <tr><td>5</td><td>1247</td><td>22</td><td>1354</td></tr>
            <tr><td>6</td><td>1217</td><td>22</td><td>1348</td></tr>
            <tr><td>7</td><td>1235</td><td>21</td><td>1327</td></tr>
            <tr><td>8</td><td>1247</td><td>21</td><td>1223</td></tr>
          </table>
      </div>

      <div class="box boxSB">
        <div class="boxC boxCB">
          <h4 class="h4-t h4-tc">当天年级跳绳时长及占比</h4>
          <div id="p3" class="boxCont"></div>
        </div>
      </div>

        <div class="box boxSB">
            <div class="boxC">
                <div id="line1" class="boxCont"></div>
            </div>
        </div>

    </div>

    <div class="pos mid">
      <div class="midTop">
        <div class="one">
            <p class="p-icon"><em class="em-icon icon-paobu1 em-i-5"></em></p>
            <p class="p-t">学校跑步人数</p>
            <p class="p-num">1000 <em class="em-du">(+300)</em></p>
        </div>
        <div class="one">
            <p class="p-icon"><em class="em-icon icon-paobu em-i-6"></em></p>
            <p class="p-t">学校跑步里程</p>
            <p class="p-num">1000km</p>
        </div>
        <div id="p1" class="one"></div>
        <div id="p2" class="one"></div>
      </div>

      <div class="boxSB mar-b10" style="height:39.8%;">
        <h4 class="h4-t">实时跑步记录</h4>
        <table class="table" cellspacing="0" cellpadding="0">
            <tr><th>排名</th><th>姓名</th><th>学籍号</th><th>总个数</th><th>总时长(h)</th><th>班级</th><th>年级</th></tr>
            <tr><td>
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-diyiming7"></use>
              </svg>
            </td><td>张三</td><td>04</td><td>1357</td><td>3</td><td>2105</td><td>21</td></tr>
            <tr><td>
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-dierming3"></use>
              </svg>
            </td><td>李四</td><td>23</td><td>1257</td><td>3.2</td><td>2001</td><td>20</td></tr>
            <tr><td>
              <svg class="icon svg-icon" aria-hidden="true">
                <use xlink:href="#icon-disanming3"></use>
              </svg>
            </td><td>钟霞</td><td>22</td><td>1145</td><td>3.2</td><td>2001</td><td>20</td></tr>
            <tr><td>4</td><td>肖可</td><td>14</td><td>1024</td><td>3.4</td><td>2001</td><td>20</td></tr>
            <tr><td>5</td><td>乐琪</td><td>17</td><td>987</td><td>2.5</td><td>2201</td><td>22</td></tr>
            <tr><td>6</td><td>末李一</td><td>23</td><td>1257</td><td>3.2</td><td>2001</td><td>20</td></tr>
            <tr><td>7</td><td>马子怡</td><td>22</td><td>1145</td><td>3.2</td><td>2001</td><td>20</td></tr>
            <tr><td>8</td><td>李小强</td><td>22</td><td>1145</td><td>3.2</td><td>2001</td><td>20</td></tr>
            <tr><td>9</td><td>吕琪</td><td>22</td><td>1145</td><td>3.2</td><td>2001</td><td>20</td></tr>
            <tr><td>10</td><td>马德华</td><td>22</td><td>1145</td><td>3.2</td><td>2001</td><td>20</td></tr>
          </table>
      </div>

        <div class="box boxSB">
            <div class="boxC">
                <div id="line2" class="boxCont"></div>
            </div>
        </div>
    </div>

    <div class="pos east">

      <div class="boxSB mar-b10">
        <h4 class="h4-t h4-tb">当天班级里程排行</h4>
        <table class="table" cellspacing="0" cellpadding="0">
          <tr><th>排名</th><th>班级</th><th>年级</th><th>总时长(h)</th></tr>
          <tr><td>
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icon-diyiming7"></use>
            </svg>
          </td><td>2456</td><td>23</td><td>2456</td></tr>
          <tr><td>
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icon-dierming3"></use>
            </svg>
          </td><td>2147</td><td>24</td><td>2014</td></tr>
          <tr><td>
            <svg class="icon svg-icon" aria-hidden="true">
              <use xlink:href="#icon-disanming3"></use>
            </svg>
          </td><td>1987</td><td>25</td><td>1945</td></tr>
          <tr><td>4</td><td>1754</td><td>21</td><td>1874</td></tr>
          <tr><td>5</td><td>1247</td><td>22</td><td>1354</td></tr>
          <tr><td>6</td><td>1217</td><td>22</td><td>1348</td></tr>
          <tr><td>7</td><td>1235</td><td>21</td><td>1327</td></tr>
          <tr><td>8</td><td>1247</td><td>21</td><td>1223</td></tr>
        </table>
      </div>

      <div class="box boxSB">
        <div class="boxC boxCB">
          <h4 class="h4-t h4-tc">当天年级运动时长及占比</h4>
          <div id="p4" class="boxCont"></div>
        </div>
      </div>

        <div class="box boxSB">
            <div class="boxC">
                <div id="bar1" class="boxCont"></div>
            </div>
        </div>

    </div>

  </div>
</div>


</div>

<!-- 返回顶部 end -->

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/echarts-liquidfill.min.js"></script>
<script type="text/javascript" src="css/iconfont/iconfont.js"></script>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript" src="js/baseD.js"></script>
</body>
</html>